<template>
  <div class="app-container home">
    <!-- 欢迎语 -->
    <el-row :gutter="20">
      <div class="welcomeMSG">
        <div class="msg">
          <!-- 头像and欢迎语 -->
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <span class="hellowmessage">你好！<strong>{{userName}}</strong>，欢迎使用便利蜂财务系统</span>
          <br/>
        </div>
      </div>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="4">
        <div class="titleStyle">
          <el-row>
            <el-col>
              <div class="titleTopStyle">
                <span>总用户数</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="titleBottomStyle">
                <span style="color: #eaa000">{{userCount}}<span style="font-size: 15px;font-weight: 300">（单位：/人)</span></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="titleStyle">
          <el-row>
            <el-col>
              <div class="titleTopStyle">
                <span>分店数量</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="titleBottomStyle">
                <span style="color: #eaa000">{{stuCount}}<span
                  style="font-size: 15px;font-weight: 300">（单位：/个)</span></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="titleStyle">
          <el-row>
            <el-col>
              <div class="titleTopStyle">
                <span>分店数量</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="titleBottomStyle">
                <span style="color: #eaa000">{{teacherCount}}<span
                  style="font-size: 15px;font-weight: 300">（单位：/个)</span></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="titleStyle">
          <el-row>
            <el-col>
              <div class="titleTopStyle">
                <span>分店数量</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="titleBottomStyle">
                <span style="color: #eaa000">{{collegeCount}}<span
                  style="font-size: 15px;font-weight: 300">（单位：/个)</span></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="titleStyle">
          <el-row>
            <el-col>
              <div class="titleTopStyle">
                <span>分店数量</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="titleBottomStyle">
                <span style="color: #eaa000">{{communityCount}}<span
                  style="font-size: 15px;font-weight: 300">（单位：/个)</span></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="titleStyle">
          <el-row>
            <el-col>
              <div class="titleTopStyle">
                <span>分店数量</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="titleBottomStyle">
                <span style="color: #eaa000">{{actCount}}<span
                  style="font-size: 15px;font-weight: 300">（单位：/个)</span></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="analyzeSystem">
          <el-row>
            <el-col :span="24">
              <div class="topleft">
                资&nbsp;产&nbsp;统&nbsp;计
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-tabs tab-position="left"
                       style="height: 400px;"
                       v-model="activeName"
                       @tab-click="tabClick">
                <el-tab-pane label="资产" name="1">
                  <div
                    :style="{height:eheight,width:echartsWidth}"
                    ref="cStuCount"></div>
                </el-tab-pane>

                <el-tab-pane label="资产" name="2">
                  <div
                    :style="{height:eheight,width:echartsWidth}"
                    ref="cmuNum"></div>
                </el-tab-pane>

                <el-tab-pane label="资产" name="3">
                  <div
                    :style="{height:eheight,width:echartsWidth}"
                    ref="cActNum"></div>
                </el-tab-pane>

                <el-tab-pane label="资产" name="4">
                  <div :style="{height:eheight,width:echartsWidth}"
                       ref="cStuNum"></div>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="analyzeSystem">
          <el-row>
            <el-col :span="24">
              <div class="topleft">
                利&nbsp;润&nbsp;统&nbsp;计
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-tabs tab-position="left"
                       @tab-click="tabClick1"
                       v-model="activeName1"
                       style="height: 400px;">
                <el-tab-pane label="利润" name="5"
                             style="text-align:center">
                  <div
                       :style="{height:eheight,width:echartsWidth}"
                       ref="firstCount"></div>
                </el-tab-pane>
                <el-tab-pane label="利润" name="6">
                  <div
                       :style="{height:eheight,width:echartsWidth}"
                       ref="secondCount"></div>
                </el-tab-pane>
                <el-tab-pane label="利润" name="7">
                  <div
                       :style="{height:eheight,width:echartsWidth}"
                       ref="thirdCount"></div>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import store from "@/store";
  import echarts from 'echarts'
  import {
    stuCount,
    userCount,
    teacherCount,
    actCount,
    communityCount,
    collegeCount,
    ccCount,
    cActCount,
    cUserCount,
    cStuCount,
    cFirstCount,
    cSecondCount,
    cThirdCount
  } from "@/api/manage/countdata";

  export default {
    name: "index",
    data() {
      return {
        // 版本号
        version: "1.0.0",
        userName: store.getters.name,
        stuCount: 100,
        teacherCount: 200,
        communityCount: 50,
        collegeCount: 10,
        userCount: 10,
        actCount: 10,
        echartsWidth: '600px',
        eheight: '400px',
        activeName: '1',
        activeName1: '5',
        ccCount: [],
        cActCount:[],
        cUserCount:[],
        cStuCount:[],
        cFirstCount:[],
        cSecondCount:[],
        cThirdCount:[],
      };
    },
    watch: {},
    created() {
      stuCount().then(res => {
        this.stuCount = res.data
      })
      userCount().then(res => {
        this.userCount = res.data
      })
      teacherCount().then(res => {
        this.teacherCount = res.data
      })
      actCount().then(res => {
        this.actCount = res.data
      })
      communityCount().then(res => {
        this.communityCount = res.data
      })
      collegeCount().then(res => {
        this.collegeCount = res.data
      })
      cStuCount().then(res => {
        this.cStuCount = res.data
        this.drawE1(this.cStuCount,'学院学生统计');
      })
      cFirstCount().then(res => {
        this.cFirstCount = res.data
        this.drawE5(this.cFirstCount, '获得一等奖数量');
      })
    },
    mounted() {
    },
    methods: {

      tabClick() {
        switch (this.activeName) {
          case '1':
            this.drawE1(this.cStuCount,'学院学生统计');
            break;
          case '2':
            ccCount().then(res => {
              this.ccCount = res.data
              this.drawE2(this.ccCount, '学院社团统计');
            })
            break;
          case '3':
            cActCount().then(res => {
              this.cActCount = res.data
              this.drawE3(this.cActCount, '学院活动统计');
            })
            break;
          case '4':
            cUserCount().then(res => {
              this.cUserCount = res.data
              this.drawE4(this.cUserCount, '入团学生统计');
            })
            break;
        }
      },
      tabClick1(){
        switch (this.activeName1) {
          case '5':
            cFirstCount().then(res => {
              this.cFirstCount = res.data
              this.drawE5(this.cFirstCount, '获得一等奖数量');
            })
            break;
          case '6':
            cSecondCount().then(res => {
              this.cSecondCount = res.data
              this.drawE6(this.cSecondCount, '获得二等奖数量');
            })
            break;
          case '7':
            cThirdCount().then(res => {
              this.cThirdCount = res.data
              this.drawE7(this.cThirdCount, '获得三等奖数量');
            })
            break;
        }
      },
      drawE5(chartData, title) {
        let titleData = []
        chartData.forEach(item => {
          titleData.push(item.name)
        })
        let charts = echarts.init(this.$refs.firstCount);
        charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: title+'<br/>{b} : {c} ({d}%)'
          },
          legend: {
            data: titleData
          },
          color: ['#ca8622', '#546570', '#d48265', '#bda29a', '#749f83', '#61a0a8', '#91c7ae', '#6e7074', '#c4ccd3', '#c23531', '#2f4554',],
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: chartData
            }
          ],
          itemStyle: {
            // 阴影的大小
            shadowBlur: 0,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            emphasis: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
          }
        })
        window.addEventListener("resize", function () {
          charts.resize();
        });
      },
      drawE6(chartData, title) {
        let titleData = []
        chartData.forEach(item => {
          titleData.push(item.name)
        })
        let charts = echarts.init(this.$refs.secondCount);
        charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: title+'<br/>{b} : {c} ({d}%)'
          },
          legend: {
            data: titleData
          },
          color: ['#ca8622', '#546570', '#d48265', '#bda29a', '#749f83', '#61a0a8', '#91c7ae', '#6e7074', '#c4ccd3', '#c23531', '#2f4554',],
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: chartData
            }
          ],
          itemStyle: {
            // 阴影的大小
            shadowBlur: 0,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            emphasis: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
          }
        })
        window.addEventListener("resize", function () {
          charts.resize();
        });
      },
      drawE7(chartData, title) {
        let titleData = []
        chartData.forEach(item => {
          titleData.push(item.name)
        })
        let charts = echarts.init(this.$refs.thirdCount);
        charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: title+'<br/>{b} : {c} ({d}%)'
          },
          legend: {
            data: titleData
          },
          color: ['#ca8622', '#546570', '#d48265', '#bda29a', '#749f83', '#61a0a8', '#91c7ae', '#6e7074', '#c4ccd3', '#c23531', '#2f4554',],
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: chartData
            }
          ],
          itemStyle: {
            // 阴影的大小
            shadowBlur: 0,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            emphasis: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
          }
        })
        window.addEventListener("resize", function () {
          charts.resize();
        });
      },
      drawE1(countData, title) {
        let keyName = []
        let keyNum = []
        countData.forEach(item =>{
          keyName.push(item.name);
          keyNum.push(item.value)
        })
        let myChart = echarts.init(this.$refs.cStuCount);
        // 绘制图表
        myChart.setOption({
          legend: {
            data: keyName,
            left: '10%'
          },
          color: ['#3398DB'],
          title: {title},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            data: keyName
          },
          yAxis: {},
          series: [{
            name: '学生数量',
            type: 'bar',
            data: keyNum
          }]
        })
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      drawE2(countData, title) {
        let keyName = []
        let keyNum = []
        countData.forEach(item =>{
          keyName.push(item.name);
          keyNum.push(item.value)
        })
        let myChart = echarts.init(this.$refs.cmuNum);
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {title},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            data: keyName
          },
          yAxis: {},
          series: [{
            name: '社团数量',
            type: 'bar',
            data: keyNum
          }]
        })
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      drawE3(countData, title) {
        let keyName = []
        let keyNum = []
        countData.forEach(item =>{
          keyName.push(item.name);
          keyNum.push(item.value)
        })
        let myChart = echarts.init(this.$refs.cActNum);
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {title},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            data: keyName
          },
          yAxis: {},
          series: [{
            name: '活动数量',
            type: 'bar',
            data: keyNum
          }]
        })
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      drawE4(countData, title) {
        let keyName = []
        let keyNum = []
        countData.forEach(item =>{
          keyName.push(item.name);
          keyNum.push(item.value)
        })
        let myChart = echarts.init(this.$refs.cStuNum);
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {title},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            data: keyName
          },
          yAxis: {},
          series: [{
            name: '学生数量',
            type: 'bar',
            data: keyNum
          }]
        })
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .home {
    .el-row {
      margin-bottom: 10px;
    }

    .welcomeMSG {
      text-align: left;

      .msg {
        height: 100px;
        padding-top: 15px;

        .el-avatar {
          margin-left: 15px;
          margin-right: 15px;
          width: 65px;
          height: 65px;
        }

        .hellowmessage {
          display: inline-block;
          font-size: 20px;
          transform: translateY(-123%);
        }
      }
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }


    .titleStyle {
      min-height: 140px;
      border: 1px solid #335dbd;
      border-radius: 5%;
      margin: 10px 10px 10px 0px;
    }

    .titleTopStyle {
      min-height: 50px;
      border-radius: 5% 5% 0 0;
      text-align: center;
      font-size: 20px;
      font-weight: 900;
      line-height: 50px;
      background-color: #335dbd !important;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;

      span {
        color: #fff;
      }
    }

    .titleBottomStyle {
      text-align: center;
      font-size: 50px;
      font-weight: 600;
      line-height: 90px;
    }

    .analyzeSystem {
      min-height: 400px;
      border: 1px solid lightskyblue;
      border-radius: 2%;
      margin-right: 5px;
    }

    .topleft {
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #335dbd;
      color: #fff;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
    }
  }
</style>

